<template>
	<view class="page">
		<view v-if="goodsList.length > 0">
			<uni-section title="商品图示" type="circle">
				<view class="grid-box" v-if="type == 0">
					<uni-grid :column="3" :highlight="true" borderColor="#bdbdbd">
						<uni-grid-item v-for="(item, index) in goodsList" :index="index" :key="index">
								<view class="grid-item-box" style="background-color: #fff;">
									<image :src="item.goodsPicture" mode="aspectFit"></image>
								</view>
								<view class="bottom-title">
									剩余：{{item.stock}}
								</view>
						</uni-grid-item>
					</uni-grid>
				</view>
				<view v-else>
					<checkbox-group @change="checkboxChange">
						<label class="uni-list-cell" v-for="(item, index) in goodsList" :key="item.goodsId">
							<view>
								<checkbox :value="index"/>
							</view>
							<view class="radio-item-box" style="background-color: #fff;">
								<image :src="item.goodsPicture" mode="aspectFit"></image>
							</view>
							<view style="flex:1;margin-left: 10rpx; overflow: hidden;white-space: nowrap; text-overflow: ellipsis;">{{item.goodsName}}</view>
							<view style="color: #ff5500;">¥ {{item.goodsPrice}}</view>
						</label>
					</checkbox-group>
					<view class="footer">
						<button type="primary" @click="handleSelected">确定</button>
					</view>
				</view>
			</uni-section>
		</view>
		<empty-view v-else></empty-view>
	</view>
</template>

<script>
	import EmptyView from "@/components/EmptyView"
	
	export default {
		components: {
			EmptyView
		},
		
		data() {
			return {
				goodsList: [],
				type: 0,
				current: ''
			}
		},
		
		onLoad(options) {
			this.machineId = options.machineId
			if(options.type && options.type == 'select') {
				this.type = 1
			} else {
				this.type = 0
			}
			this.getGoodsInfo()
		},
		
		methods: {
			getGoodsInfo() {
				uni.showLoading({
					title: '加载中...'
				})
				uni.request({
					url: getApp().globalData.apiUrl + '/card/api/v1/getMachineGoods',
					data: {
						machineId: this.machineId
					},
					success: res => {
						if(res.data.success) {
							let goodsList = []
							
							if(res.data.result.length > 0) {
								res.data.result.forEach( item => {
									goodsList = [ ...item.goodsList, ...goodsList]
								})
							}
							
							this.goodsList = [...goodsList] 
							
							uni.hideLoading()
						} else {
							uni.showToast({
								icon:'error',
								title: res.data.message
							})
						}
					}
				})
			},
			
			checkboxChange(e) {
				this.selectedList = e.detail.value
			},
			
			handleSelected() {
				let list = []
				this.selectedList.map( item => {
					let { goodsId, goodsName } = this.goodsList[item]
					list.push({
						goodsId, goodsName, stock: 0
					})
				})
				
				let pages = getCurrentPages(); // 当前页面
				
				let beforePage = pages[pages.length - 2]; // 上一页
				
				uni.navigateBack({
					success: function() {
						beforePage.$vm.setGoods(list);
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		padding-bottom: env(safe-area-inset-bottom);
	}
	
	.grid-box {
		padding: 20rpx;
		box-sizing: border-box;
	}

	.grid-item-box {
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		
		image {
			height: 100%;
			width: 100%;
		}
	}
	
	.bottom-title {
		background-color: rgba(0, 0, 0, 0.7);
		color: #fff;
		font-size: 24rpx;
		height: 50rpx;
		text-align: center;
	}
	
	.uni-list-cell {
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		padding: 22rpx 30rpx
	}
	
	.radio-item-box {
		margin-left: 30rpx;
		border: 1px solid #d5d5d5;
		width: 150rpx;
		height: 150rpx;
		border-radius: 2px;
		
		image {
			height: 100%;
			width: 100%;
			border-radius: 2px;
		}
	}
	
	.footer {
		padding: 20rpx;
	}
</style>